<!-- 聚类实验一Kmeans 数据集-->
<template>
    <div class="body">
        <div class="header">
            <el-form
                ref="form"
                :rules="formRules"
                :model="formModel"
                label-width="80px"
            >
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="exp:" prop="exp">
                            <el-input
                                v-model="formModel.exp"
                                placeholder="请输入参数exp"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit"
                                >获取数据</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="body1">
            <div id="point1" class="pie-wrap"></div>
            <div id="point2" class="pie-wrap"></div>
        </div>
    </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
import * as echarts from "echarts";
export default {
    name: "Exp1Dbscan",
    components: {
        JsonViewer,
    },
    data() {
        //验证这个数据是否在0到1之间
        const validNum = (rule, value, callback) => {
            if (value > 1 || value < 0) {
                callback(new Error("数字范围是0~1"));
            } else {
                callback();
            }
        };

        return {
            formModel: {
                exp: 0.15,
            },
            formRules: {
                exp: [
                    {
                        validator: validNum,
                        trigger: "blur",
                    },
                ],
            },
            twoList1: [],
            twoList2: [],

            option1: {},
            option2: {},

            colors: ["#FFD700", "#2F4F4F", "#FF8C00", "#B8860B", "#DC143C"],
        };
    },

    mounted() {
        this.getData();
        this.$nextTick(() => {
            this.drawPieChart();
        });
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    //验证成功
                    let res = await this.$http.get("/two/moons/dataset");
                    let point = res.data;
                    let { data } = await this.$http.get(
                        "/two/moons/dbscan?exp=" + this.formModel.exp
                    );
                    //清空之前的数据
                    this.twoList1 = [];
                    this.twoList2 = [];
                    //先开始进行分类吧，找出来有多少类出来
                    let tempSet = [];
                    for (let i = 0; i < data.blobs.length; i++) {
                        //是否开始得到下面的数据
                        const index = data.blobs[i];
                        if (tempSet.indexOf(index) >= 0) {
                            let k = tempSet.indexOf(index);
                            this.twoList1[k].push(point.blobs[i]);
                        } else {
                            tempSet.push(index);
                            let arr = [];
                            arr.push(point.blobs[i]);
                            this.twoList1.push(arr);
                        }
                    }
                    tempSet = [];
                    for (let i = 0; i < data.moons.length; i++) {
                        //是否开始得到下面的数据
                        const index = data.moons[i];
                        if (tempSet.indexOf(index) >= 0) {
                            let k = tempSet.indexOf(index);
                            this.twoList2[k].push(point.moons[i]);
                        } else {
                            tempSet.push(index);
                            let arr = [];
                            arr.push(point.moons[i]);
                            this.twoList2.push(arr);
                        }
                    }
                    let tempOption = [];
                    for (let i = 0; i < this.twoList1.length; i++) {
                        tempOption.push({
                            symbolSize: 20,
                            data: this.twoList1[i],
                            type: "scatter",
                            itemStyle: {
                                color: this.colors[i],
                            },
                        });
                    }

                    this.option1.series = tempOption;
                    this.chartPie1.clear();     //清空图表
                    this.chartPie1.setOption(this.option1);

                    tempOption = [];
                    for (let i = 0; i < this.twoList2.length; i++) {
                        tempOption.push({
                            symbolSize: 20,
                            data: this.twoList2[i],
                            type: "scatter",
                            itemStyle: {
                                color: this.colors[i],
                            },
                        });
                    }
                    this.option2.series = tempOption;
                    this.chartPie2.clear();     //清空图表
                    this.chartPie2.setOption(this.option2);
                }
            });
        },

        async getData() {
            // 数据集，数据集得到了，那么就好办了，直接开始下面的开始开始操作
            let res = await this.$http.get("/two/moons/dataset");
            let point = res.data;
            let { data } = await this.$http.get("/two/moons/dbscan");

            //先开始进行分类吧，找出来有多少类出来
            let tempSet = [];
            for (let i = 0; i < data.blobs.length; i++) {
                //是否开始得到下面的数据
                const index = data.blobs[i];
                if (tempSet.indexOf(index) >= 0) {
                    let k = tempSet.indexOf(index);
                    this.twoList1[k].push(point.blobs[i]);
                } else {
                    tempSet.push(index);
                    let arr = [];
                    arr.push(point.blobs[i]);
                    this.twoList1.push(arr);
                }
            }
            tempSet = [];
            for (let i = 0; i < data.moons.length; i++) {
                //是否开始得到下面的数据
                const index = data.moons[i];
                if (tempSet.indexOf(index) >= 0) {
                    let k = tempSet.indexOf(index);
                    this.twoList2[k].push(point.moons[i]);
                } else {
                    tempSet.push(index);
                    let arr = [];
                    arr.push(point.moons[i]);
                    this.twoList2.push(arr);
                }
            }
            let tempOption = [];
            for (let i = 0; i < this.twoList1.length; i++) {
                tempOption.push({
                    symbolSize: 20,
                    data: this.twoList1[i],
                    type: "scatter",
                    itemStyle: {
                        color: this.colors[i],
                    },
                });
            }

            this.option1.series = tempOption;
            this.chartPie1.setOption(this.option1);

            tempOption = [];
            for (let i = 0; i < this.twoList2.length; i++) {
                tempOption.push({
                    symbolSize: 20,
                    data: this.twoList2[i],
                    type: "scatter",
                    itemStyle: {
                        color: this.colors[i],
                    },
                });
            }
            this.option2.series = tempOption;
            this.chartPie2.setOption(this.option2);
        },

        drawPieChart() {
            document.getElementById("point1").width = document.getElementById(
                "point1"
            ).width;
            document.getElementById("point1").height = document.getElementById(
                "point1"
            ).height;
            document.getElementById("point2").width = document.getElementById(
                "point2"
            ).width;
            document.getElementById("point2").height = document.getElementById(
                "point2"
            ).height;

            this.chartPie1 = echarts.init(document.getElementById("point1"));
            this.chartPie2 = echarts.init(document.getElementById("point2"));
            this.option1 = {
                xAxis: {},
                yAxis: {},
                title: {
                    text: "blobs",
                    x: "center",
                    y: "bottom",
                },

                series: [
                    {
                        symbolSize: 20,
                        data: this.blobs,
                        type: "scatter",
                    },
                ],
            };
            this.option2 = {
                xAxis: {},
                yAxis: {},
                title: {
                    text: "moons",
                    x: "center",
                    y: "bottom",
                },
                series: [
                    {
                        symbolSize: 20,
                        data: this.moons,
                        type: "scatter",
                    },
                ],
            };
            this.chartPie1.setOption(this.option1);
            this.chartPie2.setOption(this.option2);
        },
    },
};
</script>

<style  scoped>
.body {
    height: 100%;
}
.body1 {
    height: 100%;
}
.pie-wrap {
    width: 50%;
    height: 50%;
    float: left;
}
</style>
